const { src, dest, watch, series } = require('gulp');
const rename = require("gulp-rename");
const concat = require("gulp-concat")
const del = require('del')
// js
const uglify = require("gulp-uglify")
// css
const sass = require("gulp-sass");
const minifyCSS = require("gulp-minify-css");
// html
const htmlmin = require('gulp-htmlmin')
// 服务器
const webserver = require('gulp-webserver')
// html代码片段
const fileInclude = require('gulp-file-include')
// -----------------------------------------------------

// 创建一个删除任务，进行文件夹清理
function delDist() {
    return del(['./dist'])
}

// html
function html() {
    return src('src/*.html')
        .pipe(fileInclude({ 
            prefix:'@~@',//设置一个标识符,程序会在html中查找这个位置
            basepath:'./src/components',//基准目录
            // html中的写法：@~@include('./header.html',{title:'首页'})传入的变量
        }))
        .pipe(htmlmin({ collapseWhitespace: true }))//压缩空格
        .pipe(dest('dist/'));
}
// css
function css() {
    return src('src/css/*.scss')
        .pipe(concat('build.css'))//全部放在一起，临时命名
        .pipe(sass())
        .pipe(minifyCSS())
        .pipe(rename("index.min.css"))
        .pipe(dest("dist/css/"))
}
// js
function js() {
    return src('src/js/*.js')
        .pipe(concat('build.js'))//全部放在一起，临时命名
        .pipe(uglify())
        .pipe(rename("build.min.js"))
        .pipe(dest('dist/js/'))
}

// img
function img() {
    return src('src/images/**')
        .pipe(dest('dist/images/'))
}

// video
function video() {
    return src('src/video/**')
        .pipe(dest('dist/video/'))
}

// lib
function lib() {
    return src('src/lib/**')
        .pipe(dest('dist/lib/'))
}


// 注册监视任务
// 当这个文件夹下内容发生变化，自动执行task为css的函数
watch('src/*.html', html);
watch('src/css/*.scss', css);
watch('src/js/*.js', js);


// 启动服务器

function webserverHandle() {
    return src('./dist')//映射到dist目录，每当dist目录下内容改变，就会重新渲染  
        .pipe(webserver({
            host: 'localhost',//可以配置自定义域名
            port: '8088',
            livereload: true,//热更新，不过贼慢怎么回事?。。。垃圾，不如我的liveserver！
            open: './index.html',//启动服务自动打开这个页面，位置是基于 src目录下
            proxies: [//配置代理
                {
                    // 这样发送ajax请求后,可以代理到这个接口，例如：$.get('/dt/xxxxx')这样就好
                    source: '/dt',//代理标识符
                    target: 'https://www.duitang.com/napi/blog/list/by_filter_id/'//目标地址
                },
            ]
        }))
}
// exports.build = build;
exports.del = delDist
exports.default = series(delDist, html, css, js, img, video, lib, webserverHandle);